import { Message, Tabs } from '@aws-amplify/ui-react';
import AppDirectoryAlert from '@/components/AppDirectoryAlert';
import { Example, ExampleCode } from '@/components/Example';
import { BasicShoppingCard, AdvancedShoppingCard } from '../shared';
import { InstallScripts, TerminalCommand } from '@/components/InstallScripts.tsx';

## Tutorial

In this brief tutorial, we're going to build a basic shopping card component using [Next.js](https://nextjs.org/docs) and Amplify UI. Then, we'll elaborate on our shopping card to play with the possibilities of using Amplify UI.

### App Router
<AppDirectoryAlert/>

### Setup and Installation

First, execute the command below in your terminal. When prompted for the name of your project, enter `amplify-ui-demo`. 

<Tabs.Container defaultValue="Pages Router (Next.js 11.0+)">
  <Tabs.List>
    <Tabs.Item value="Pages Router (Next.js 11.0+)">Pages Router (Next.js 11.0+)</Tabs.Item>
    <Tabs.Item value="App Router (Next.js 13.4+)">App Router (Next.js 13.4+)</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="Pages Router (Next.js 11.0+)">
    <TerminalCommand command="npx create-next-app@latest amplify-ui-demo --no-app && cd amplify-ui-demo" />
  </Tabs.Panel>
  <Tabs.Panel value="App Router (Next.js 13.4+)">
    <TerminalCommand command="npx create-next-app@latest amplify-ui-demo && cd amplify-ui-demo" />
  </Tabs.Panel>
</Tabs.Container>

Then, install the Amplify UI React package:

<InstallScripts framework="react" />

### Basic Demo

<Tabs.Container defaultValue="Pages Router (Next.js 11.0+)">
  <Tabs.List>
    <Tabs.Item value="Pages Router (Next.js 11.0+)">Pages Router (Next.js 11.0+)</Tabs.Item>
    <Tabs.Item value="App Router (Next.js 13.4+)">App Router (Next.js 13.4+)</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="Pages Router (Next.js 11.0+)">

Open up the project in your IDE and replace the contents of the `pages/index.js` with the code below:

  <Example>
    <ExampleCode>
    
  ```tsx file=./examples/BasicExampleCode.tsx
  ```

    </ExampleCode>
    <BasicShoppingCard />
  </Example>

  </Tabs.Panel>
    <Tabs.Panel value="App Router (Next.js 13.4+)">
    <Message colorTheme="info" role="none">
      Next.js 13.4+ introduced [app directory](https://nextjs.org/docs/app/building-your-application/routing#the-app-directory) with the usage of [Server Components](https://nextjs.org/docs/app/building-your-application/rendering/server-components). In this guide we placed `"use client"` at the top of `page.jsx` to mark it as a Client Component.
    </Message>

Open up the project in your IDE and replace the contents of the `app/page.jsx` with the code below:

    <Example>
      <ExampleCode>

```tsx file=./examples/UseClientBasicExampleCode.tsx
```

      </ExampleCode>
      <BasicShoppingCard />
    </Example>
  </Tabs.Panel>
</Tabs.Container>

When you start the app (`npm run dev` or `yarn dev`), you should see a basic shopping card component.

### Advanced Demo

<Tabs.Container defaultValue="Pages Router (Next.js 11.0+)">
  <Tabs.List>
    <Tabs.Item value="Pages Router (Next.js 11.0+)">Pages Router (Next.js 11.0+)</Tabs.Item>
    <Tabs.Item value="App Router (Next.js 13.4+)">App Router (Next.js 13.4+)</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="Pages Router (Next.js 11.0+)">
If you’d like to play around with a more comprehensive demo of the Amplify UI library, create a separate file under the `pages` folder named `paintings.js`, and copy/paste this code into it:

    <ExampleCode>

```tsx file=./examples/paintings.ts
```

   </ExampleCode>

Then, replace the contents of `pages/index.js` with the code below, restart the app, and experience all the beautiful components in action!

    <Example>
      <ExampleCode>

```tsx file=./examples/AdvancedExampleCode.tsx
```

      </ExampleCode>
      <AdvancedShoppingCard />
    </Example>

  </Tabs.Panel>
  <Tabs.Panel value="App Router (Next.js 13.4+)">
  <Message colorTheme="info">
    Next.js 13.4+ introduced [app directory](https://nextjs.org/docs/app/building-your-application/routing#the-app-directory) with the usage of [Server Components](https://nextjs.org/docs/app/building-your-application/rendering/server-components). In this guide we placed `"use client"` at the top of `page.jsx` to mark it as a Client Component.
  </Message>
If you’d like to play around with a more comprehensive demo of the Amplify UI library, create a separate file under the `app` folder named `paintings.js`, and copy/paste this code into it:

    <ExampleCode>

```tsx file=./examples/paintings.ts
```

    </ExampleCode>

Then, replace the contents of `app/page.jsx` with the code below, restart the app, and experience all the beautiful components in action!

    <Example>
      <ExampleCode>

```tsx file=./examples/UseClientAdvancedExampleCode.tsx
```

      </ExampleCode>
      <AdvancedShoppingCard />
    </Example>
  </Tabs.Panel>
</Tabs.Container>
